<!-- 班级学生信息管理 -->
<script setup>
import { Search } from '@element-plus/icons-vue'

const tableData = [
  {
    class: '软件22-1',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '软件技术',
    time: '2022-09-01'
  },
  {
    class: '软件22-2',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '软件技术',
    time: '2022-09-01'
  },
  {
    class: '软件22-3',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '软件技术',
    time: '2022-09-01'
  },
  {
    class: 'AI22-1',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '人工智能',
    time: '2022-09-01'
  },
  {
    class: 'AI23-1',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '人工智能',
    time: '2022-09-01'
  },
  {
    class: 'AI23-2',
    school: '四川信息职业技术学院',
    department: '软件学院',
    profession: '人工智能',
    time: '2022-09-01'
  }
]
</script>

<template>
  <div class="my-class-manger">
    <el-input v-model="inputValue" :suffix-icon="Search" class="input-header" placeholder="搜索" />

    <div class="classInfo">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="100" />
        <el-table-column fixed prop="class" label="班级" width="300" />
        <el-table-column fixed prop="school" label="学校" width="300" />
        <el-table-column prop="department" label="院校" width="300" />
        <el-table-column prop="profession" label="专业" width="300" />
        <el-table-column prop="time" label="加入时间" width="300" />
        <el-table-column fixed="right" label="操作" width="300">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick"> 移除 </el-button>
            <el-button link type="primary" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss">
.my-class-manger {
  display: flex;
  flex-direction: column;

  // 输入框
  .el-input {
    width: 200px;

    .el-input__wrapper {
      border-radius: 50px;
    }
  }

  // 表格
  .classInfo {
    margin-top: 20px;

    .classItem {
      width: 180px;
      height: 80px;
      line-height: 80px;
      position: relative;
      top: 20px;
      &:hover {
        background-color: #f5f5f5;
        cursor: pointer;
      }
    }
  }
}
</style>
